//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  Modal,
} from 'antd';


const FormItem = Form.Item;
const { Option } = Select;


//查看表单
@Form.create()
class ViewForm extends PureComponent {
  static defaultProps = {
    handleViewModalVisible: () => {},
    values: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      formVals: {
        name: props.values.props.dataRef.name,
        title: props.values.props.dataRef.title,
        parentid: props.values.props.dataRef.parentid,
        levelcode: props.values.props.dataRef.levelcode,
        icon: props.values.props.dataRef.icon,
        cls: props.values.props.dataRef.cls,
        leaf: props.values.props.dataRef.leaf,
        squences: props.values.props.dataRef.squences,
        levels: props.values.props.dataRef.levels,
        enables: props.values.props.dataRef.enables,
        id: props.values.props.dataRef.id,
        systime: props.values.props.dataRef.systime,
      },
    };


  }

  renderContent = (formVals) => {
    const { form } = this.props;

    return (
      <Form  layout="vertical" hideRequiredMark>



                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

	               <Col  md={12} sm={24}>
			        <FormItem  label="地区名称">
			            {form.getFieldDecorator('title', {
			            rules: [{ required: true, message: '请输入地区名称！', min: 1 }],
			            initialValue: formVals.title,
			            })(<Input readOnly placeholder="请输入" />)}
			        </FormItem>
			        </Col>
			
			        
			        <Col  md={12} sm={24}>
			        <FormItem  label="地区级别">
			            {form.getFieldDecorator('levels', {
			            rules: [{ required: true, message: '请选择级别！'}],
			            initialValue: formVals.levels + '',
			            })(
						    <Select readOnly placeholder="请选择" style={{ width: '100%' }}>
								<Option value="1">一级</Option>
								<Option value="2">二级</Option>
								<Option value="3">三级</Option>
								<Option value="4">四级</Option>
					        </Select>
						)}
			        </FormItem>
			        </Col>

                </Row>
       


    </Form>
    );

  };



  render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
      <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(formVals)}
</Modal>
    );
  }

}

export default ViewForm;